<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no,minimal-ui">
    <title>谷粒学院 - Java视频|HTML5视频|前端视频|Python视频|大数据视频-自学拿1万+月薪的IT在线视频课程，谷粉力挺，老学员为你推荐</title>
    <meta name="keywords" content="谷粒学院,IT在线视频教程,Java视频,HTML5视频,前端视频,Python视频,大数据视频"/>
    <meta name="description"
          content="谷粒学院是国内领先的IT在线视频学习平台、职业教育平台。截止目前,谷粒学院线上、线下学习人次数以万计！会同上百个知名开发团队联合制定的Java、HTML5前端、大数据、Python等视频课程，被广大学习者及IT工程师誉为：业界最适合自学、代码量最大、案例最多、实战性最强、技术最前沿的IT系列视频课程！"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
    <meta content="telephone=no" name="format-detection"/>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/theme.css">
    <link rel="stylesheet" type="text/css" href="css/global.css">
    <link rel="stylesheet" type="text/css" href="css/web.css">
    <script src="js/jquery-1.7.2.min.js"></script>
    <script src="js/Vue.js"></script>
    <script src="js/axios.js"></script>
</head>

<body class="W-body">
<div class="in-wrap" id="app">

    <!-- 公共头引入 -->
    <header id="header">
        <section class="container">
            <h1 id="logo">
                <a href="#" title="谷粒学院">
                    <img src="img/logo.png" width="100%" alt="谷粒学院">
                </a>
            </h1>
            <div class="h-r-nsl">
                <ul class="nav">
                    <li><a href="index.html" title="首页">首页</a></li>
                    <li><a href="course.html" title="课程">课程</a></li>
                    <li><a href="teacher.html" title="名师">名师</a></li>
                    <li class="current"><a href="article.html" title="文章">学习地图</a></li>
                    <li><a href="exam.html" title="考试">考试</a></li>
                </ul>
                <!-- / nav -->
                <ul class="h-r-login">
                    <li id="no-login">
                        <a href="login.html" title="登录">
                            <em class="icon18 login-icon">&nbsp;</em><span class="vam ml5">登录</span>
                        </a>
                        |
                        <a href="register.html" title="注册">
                            <span class="vam ml5">注册</span>
                        </a>
                    </li>
                    <li class="mr10 undis" id="is-login-one">
                        <a href="#" title="消息" id="headerMsgCountId">
                            <em class="icon18 news-icon">&nbsp;</em>
                        </a><q class="red-point" style="display: none">&nbsp;</q></li>
                    <li class="h-r-user undis" id="is-login-two">
                        <a href="#" title="">
                            <img src="img/avatar-boy.gif" width="30" height="30" class="vam picImg" alt="">
                            <span class="vam disIb" id="userName"></span>
                        </a>
                        <a href="javascript:void(0)" title="退出" onclick="exit();" class="ml5">退出</a></li>
                    <!-- /未登录显示第1 li；登录后显示第2，3 li -->
                </ul>
            </div>
            <aside class="mw-nav-btn">
                <div class="mw-nav-icon"></div>
            </aside>
            <div class="clear"></div>
        </section>
    </header>
    <!-- /公共头引入 -->

    <div id="aCoursesList" class="bg-fa of">
        <section class="container">
            <section class="i-article">
                <div class="fl col-7">
                    <section class="mr30">
                        <header class="comm-title all-article-title">
                            <h2 class="fl tac">
                                <span class="c-333">文章</span>
                            </h2>
                            <section class="c-tab-title">
                                <a href="javascript: void(0)">&nbsp;</a>
                            </section>
                        </header>
                        <!-- /无数据提示 开始-->
                        <!-- /无数据提示 结束-->
                        <article class="i-article-list">
                            <!-- /文章列表 开始-->
                            <ul>
                                <li v-for="map in maps">
                                    <aside class="i-article-pic">
                                        <img :src="map.image" style="margin-top: -25px" :alt="map.description">
                                    </aside>
                                    <h3 class="hLh30 txtOf">
                                        <a @click="mapDetails(map.id)" :title="map.name"
                                           class="i-art-title">{{map.name}}</a>
                                    </h3>
                                    <section class="i-q-txt mt5 i-q-txt2">
                                        <p>
                                            <span class="c-999 f-fA">{{map.description}}</span>
                                        </p>
                                    </section>
                                    <section class="hLh30 txtOf mt5 pr10 a-list-extrainfo">
                                        <span class="fr"><tt class="c-999 f-fM">2019-02-26 10:31</tt></span>
                                        <div class="fl">
												<span> <a class="noter-dy vam" title="回答"
                                                          href="http://127.0.0.1:81/front/articleinfo/23.html">
														<em class="icon18">&nbsp;</em>(<span>1</span>)
													</a> <tt title="赞一下" class="noter-zan vam ml10 f-fM"
                                                             onclick="addPraise('23',3)">
														<em class="icon18">&nbsp;</em>(<span
                                                        class="addPraise23_3 praiseCount">1</span>)
													</tt>
												</span>
                                        </div>
                                    </section>
                                </li>
                            </ul>
                            <!-- /文章列表 结束-->
                        </article>

                        <!-- 公共分页 开始 -->
                        <div>
                            <div class="paging">
                                <a v-for="n in totalPage" class="current undisable" @click="updatePage(n)">{{n}}</a>
                                <div class="clear"></div>
                            </div>
                        </div>
                        <!-- 公共分页 结束 -->

                    </section>
                </div>
            </section>
        </section>
        <!-- /文章列表 结束 -->
    </div>

    <!-- 公共底引入 -->
    <footer id="footer">
        <section class="container">
            <div class="">
                <h4 class="hLh30">
                    <span class="fsize18 f-fM c-999">友情链接</span>
                </h4>
                <ul class="of flink-list">
                    <li><a href="http://www.atguigu.com/" title="尚硅谷" target="_blank">尚硅谷</a></li>
                </ul>
                <div class="clear"></div>
            </div>
            <div class="b-foot">
                <section class="fl col-7">
                    <section class="mr20">
                        <section class="b-f-link">
                            <a href="#" title="关于我们" target="_blank">关于我们</a>|
                            <a href="#" title="联系我们" target="_blank">联系我们</a>|
                            <a href="#" title="帮助中心" target="_blank">帮助中心</a>|
                            <a href="#" title="资源下载" target="_blank">资源下载</a>|
                            <span>服务热线：010-56253825</span> <span>Email：info@atguigu.com</span>
                        </section>
                        <section class="b-f-link mt10">
                            <span>©2020课程版权均归谷粒学院所有 京ICP备19006131号</span>
                        </section>
                    </section>
                </section>
                <aside class="fl col-3 tac mt15">
                    <section class="gf-tx">
                        <span><img src="img/wx-icon.png" alt=""></span>
                    </section>
                    <section class="gf-tx">
                        <span><img src="img/wb-icon.png" alt=""></span>
                    </section>
                </aside>
                <div class="clear"></div>
            </div>
        </section>
    </footer>
    <!-- 公共底引入 -->
</div>
<script>
    new Vue({
        el: "#app",
        data: {
            page: 1,
            pageSize: 8,
            maps: [],
            totalPage: []
        },
        mounted() {	//当页面元素加载之前执行
            axios({
                method: "post",
                url: "/findLearnMapsByPage",
                data: {
                    "page": this.page,
                    "pageSize": this.pageSize
                },
                header: {
                    "Content-Type": "application/json;charset=UTF-8"
                }
            }).then(res => {
                console.info(res.data.data);
                this.maps = res.data.data.data;
                this.totalPage = res.data.data.totalPage;
            });
        }, methods: {
            updatePage: function (n) {
                console.log(n);
                axios({
                    method: "post",
                    url: "/findLearnMapsByPage",
                    data: {
                        "page": n,
                        "pageSize": this.pageSize,
                    },
                    header: {
                        "Content-Type": "application/json;charset=UTF-8"
                    }
                }).then(res => {
                    console.info(res);
                    this.maps = res.data.data.data;
                    this.totalPage = res.data.data.totalPage;
                });
            },
            mapDetails: function (id) {
                window.location.href = "article_info.html?id=" + id;
            }
        }
    })
</script>
</body>

</html>